<template>
	<!-- 数字名片详情页 -->
	<view class="app">
		<!-- 吸顶搜索栏 -->
		<view class="top-bar sticky-tabs">
			<u-icon class="icon" name="arrow-left" color="#eee" size="64" @click="vk.navigateBack"></u-icon>
			<view class="search-bar">
				<u-search placeholder="数字名片搜索" v-model="keyword" :show-action="false" shape="square" @search="search"></u-search>
			</view>
			<u-icon class="icon" name="more-dot-fill" color="#eee" size="64"
				@click="toMore()"></u-icon>
		</view>
		<!-- 详情 -->
		<view class="main">
			<view class="img-bar">
				<view class="img-item">
					<image class="card-bg" :src="cardBg" mode=""></image>
					<view class="card-main">
						<view class="card-intro">
							<view class="title1">{{formData.name}}</view>
							<view class="row">{{formData.department}}/{{formData.duty}}</view>
							<view class="row">{{formData.company_name}}</view>
							<image class="card-logo" :src="formData.images" mode=""></image>
						</view>
						<view class="card-concat">
							<view class="row">
								<u-icon class="icon" name="phone" color="#333" size="28"></u-icon>
								{{formData.mobile}}
							</view>
							<view class="row">
								<u-icon class="icon" name="email" color="#333" size="28"></u-icon>
								{{formData.email}}
							</view>
							<view class="row">
								<u-icon class="icon" name="map" color="#333" size="28"></u-icon>
								{{formData.address}}
							</view>
						</view>
					</view>
					<view class="card-footer">
						<view class=""></view>
					</view>
				</view>
			</view>
			
			<view class="section">
				<view class="btn-bar">
					<u-button type="primary" size="medium" plain @click="toShop">进入企业商铺</u-button>
					<u-button type="primary" size="medium" @click="toShare">分享给朋友</u-button>
				</view>
				<!-- 联系方式 -->
				<view class="contract-bar">
					<view class="contract-item" @click="contact(1)">
						<image class="u-icon icon" :src="wxm" mode=""></image>
						<view class="">名片码</view>
					</view>
					<view class="contract-item" @click="contact(2)">
						<u-icon name="phone" color="#333" size="64"/>
						<view class="">打电话</view>
					</view>
					<view class="contract-item" @click="contact(3)">
						<u-icon name="weixin-fill" color="#333" size="64"/>
						<view class="">加微信</view>
					</view>
					<view class="contract-item" @click="contact(4)">
						<u-icon name="map" color="#333" size="64"/>
						<view class="">看地址</view>
					</view>
					<view class="contract-item" @click="contact(5)">
						<u-icon name="phone" color="#333" size="64"/>
						<view class="">存电话</view>
					</view>
				</view>
				<!-- 操作栏 -->
				<operate-bar :data="formData" nav="card"></operate-bar>
			</view>
			
			
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import CARD from "@/data/card.js";

	export default {
		data() {
			return {
				id: null,
				keyword: '',
				cardBg: this.$resource.cardBg, // 名片背景图
				wxm: 'https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/cloudstorage/8282dbb1-3b79-43d1-b505-a6d141568b83.jpg',
				
				formData: {},
				dataList: [],
				
				scrollTop: 0, // 返回顶部
				sectionFontSize: this.$css.sectionFontSize,
				sectionBold: this.$css.sectionBold,
				sectionColor: this.$css.sectionColor,
				sectionLineColor: this.$css.sectionLineColor,
			}
		},
		onLoad(options = {}) {
			this.initPage(options)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			initPage(options = {}) {
				if(!options.id) return
				
				this.id = options.id;
				this.getData();
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			search(){
				if (config.debug) console.log('搜索', this.keyword)
				vk.toast('搜索' + this.keyword);
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			toDetail(id) {
				this.pageTo(`./detail?id=${id}`)
			},
			getData(){
				this.formData = CARD.find(item => item.id == this.id);
				uni.setNavigationBarTitle({
					title: this.formData.name + " 数字名片"
				})
			},
			getDataList(){
				this.dataList = vk.pubfn.copyObject(CARD).filter((item, index) => index < 4);
			},
			contact(id){
				vk.toast('点击了联系方式' + id);
			},
			buy(){
				console.log('点击了立即购买');
				vk.toast('点击了立即购买');
			},
			preview(){
				vk.toast('点击了图片');
			},
			toShop(){
				vk.toast('点击了进入商铺');
			},
			toShare(){
				vk.toast('点击了分享');
			}
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		},
	}
</script>

<style lang="scss">
	.app {
		
	}
	
	.banner-bar{
		height: 600rpx;
	}
	
	.section{
		padding: 0 30rpx;
		background-color: #fff;
	}

	.section>.title {
		margin: 50rpx 0;
		font-size: 24px;
		font-weight: 700;
		// text-align: center;
	}
	.btn-bar{
		padding: 20rpx 0 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.contract-bar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.contract-item{
			// height: calc((100vw - 15px) / 5);
			width: 120rpx;
			height: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}
		.icon{
			width: 94rpx;
			height: 94rpx;
		}
		.u-icon{
			padding: 10rpx;
			border-radius: 20rpx;
		}
		// .contract-item:nth-child(1) .u-icon{
		// 	background-color: limegreen;
		// }
		// .contract-item:nth-child(2) .u-icon{
		// 	background-color: royalblue;
		// }
		// .contract-item:nth-child(3) .u-icon{
		// 	background-color: springgreen;
		// }
		// .contract-item:nth-child(4) .u-icon{
		// 	background-color: orange;
		// }
		// .contract-item:last-child .u-icon{
		// 	background-color: green;
		// }
	}
	.op-ul{
		justify-content: space-around;
	}
	
	.main{
		padding: 0 20rpx;
	}
	.section {
	    padding: 30rpx;
	    background-color: #fff;
	}
	.img-bar {
		padding: 0 0rpx;
	
		.img-item {
			text-align: left;
			border-radius: 10rpx;
	
			.card-bg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}
	
			.card-main {
				position: absolute;
				top: 0;
				left: 0;
				padding: 30rpx;
				width: 100%;
				height: 100%;
				z-index: 20;
				box-sizing: border-box;
	
				.row {
					margin-bottom: 10rpx;
					padding: 0;
				}
	
				.card-intro {
					margin-bottom: 50rpx;
				}
	
				.title1 {
					margin-bottom: 20rpx;
					font-size: 18px;
					font-weight: 500;
				}
	
				.card-logo {
					position: absolute;
					top: 50rpx;
					right: 50rpx;
					width: 100rpx;
					height: 100rpx;
	
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>